<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import DPlayer from 'dplayer'
import { getMvDetailApi, getMvAddressApi } from '@/apis/mv'
import MusicVideoBtn from './MusicVideoBtn.vue'
import FullComment from '@/views/FullControl/components/FullComment.vue'
import FullPostComment from '@/views/FullControl/components/FullPostComment.vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const dPlayer = ref({})

const musicVideoInfo = ref({})
const dplayerRef = ref(null)
onMounted(async () => {
  // 获取 mv 详情
  const { data } = await getMvDetailApi(route.params.id)
  musicVideoInfo.value = data
  // 获取 mv 各清晰度的播放地址
  const promiseArr = data.data.brs.map((item) => {
    return new Promise((resolved) => {
      // 获取地址
      const data = getMvAddressApi({
        id: route.params.id,
        r: item.br
      })
      resolved(data)
    })
  })
  // 等待所有请求完成
  Promise.all(promiseArr)
    .then(res => {
      // 将请求回的数据格式化为固定格式
      const qualityArr = res.map(item => {
        return {
          name: item.data.data.r,
          url: item.data.data.url
        }
      })
      dPlayer.value = new DPlayer({
        container: dplayerRef.value,
        video: {
          quality: qualityArr,
          defaultQuality: qualityArr.length - 1,
          pic: musicVideoInfo.value.data.cover
        }
      })
    })
    .catch(() => {
      ElMessage.error('视频加载出错')
    })
})

// 是否显示 mv 简介
const isShowDesc = ref(false)

// 获取分页评论后调整滚动条高度，定位至评论展示组件的头部
const musicVideoDetail = ref(null)
const changeScroll = (top) => {
  musicVideoDetail.value.scrollTop = top - 50
}

// 销毁播放器
onBeforeUnmount(() => {
  dPlayer.value.destroy()
})
</script>

<template>
  <div class="music-vedeo-detail" ref="musicVideoDetail">
    <div class="dplayer-wrap">
      <div class="dplayer" ref="dplayerRef"></div>
    </div>

    <div class="music-video-info-wrap">
      <div class="author-info">
        <div class="author-info-wrap" v-for="item in musicVideoInfo.data?.artists" :key="item.id">
          <img v-lazy-image="item.img1v1Url || '@/assets/logo.jpg'" alt="作者">
          <p>{{ item.name }}</p>
        </div>
      </div>
      <h1 @click="isShowDesc = !isShowDesc">
        {{ musicVideoInfo.data?.name || '歌曲名称' }}
        <span class="triangle" :class="isShowDesc ? 'topTrangle' : 'bottomTrangle'"></span>
      </h1>
      <div class="play-info">
        <span>发布： {{ musicVideoInfo.data?.publishTime }}</span>
        <span>
          播放次数：<i v-format-play-count="musicVideoInfo.data?.playCount || 0"></i>
        </span>
      </div>
      <div :class="isShowDesc ? 'active' : 'mvInfo'">
        <p>{{ musicVideoInfo.data?.desc || '暂无简介' }}</p>
      </div>
      <MusicVideoBtn :subCount="musicVideoInfo.data?.subCount" :shareCount="musicVideoInfo.data?.shareCount" />
      <FullComment :id="route.params.id" :type="1"  @changeScroll="changeScroll"/>

      <div class="right-comment">
        <FullPostComment :id="route.params.id" :type="1" :name="musicVideoInfo.data?.name" />
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.music-vedeo-detail {
  max-width: 1165px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;

  .dplayer-wrap {
    height: 0;
    padding-bottom: 56%;
  }

  .music-video-info-wrap {
    .author-info {
      border-radius: 10px;
      margin-top: 25px;
      display: flex;
      flex-wrap: wrap;

      .author-info-wrap {
        margin: 10px 19px;
        display: flex;
        align-items: center;

        img {
          height: 80px;
          width: 80px;
          object-fit: cover;
          border-radius: 40px;
          background-color: #eee;
        }

        p {
          overflow: hidden;
          width: 100px;
          font-size: 18px;
          margin-left: 14px;
        }

      }
    }

    h1 {
      margin-top: 10px;
      line-height: 70px;
      display: flex;
      align-items: center;

      .triangle {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 15px solid #888;
        transition: all .1s linear;
        transform-origin: 50% 70%;
        cursor: pointer;
        margin-left: 10px;
      }

      .topTrangle {
        transform: rotate(0deg);
      }

      .bottomTrangle {
        transform: rotate(180deg);
      }
    }

    .play-info {
      margin-bottom: 10px;

      span {
        color: #aaa;
        margin-right: 20px;
      }
    }

  }

  .mvInfo {
    transform: translateY(-20px) scale(1, 0);
    display: none;
    transition: all .1s linear;
  }

  .active {
    transform: none;
    display: block;
    transition: all .1s linear;

    p {
      line-height: 25px;
    }
  }
}

.right-comment {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 100px;
  bottom: 180px;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ddd;
  text-align: center;
  line-height: 50px;
  border-radius: 3px;
  color: $sucColor;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
</style>
